<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
    <div class="row">
        <h3 class="text-center">计算器</h3>
        <div class="col-md-8 col-md-offset-2">
            <div class="form-group">
                <label for="num1">num1：</label>
                <input type="text" name="num1" id="num1" class="form-control">
            </div>
            <div class="form-group">
                <label for="num2">num2：</label>
                <input type="text" name="num2" id="num2" class="form-control">
            </div>
            <div class="form-group">
                <label for="result">result：</label>
                <input type="text" name="result" id="result" class="form-control">
            </div>
            <div class="form-group">
                <button id="btn_submit" class="btn btn-success btn-block">计算</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#btn_submit').click(function () {
        $.ajax({
            url: '{% url "cacl" %}',
            type: 'post',
            data: {
                'num1': $('#num1').val(),
                'num2': $('#num2').val(),
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function (res) {
                $('#result').val(res);
            },
        })
    })


</script>
</body>
</html>